<%--
  Created by IntelliJ IDEA.
  User: 19296
  Date: 2021/10/27
  Time: 9:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>日洗车量</title>
    <link type="text/css" rel="stylesheet" href="../fontsawesome/css/font-awesome.css"/>
    <link type="text/css" rel="stylesheet" href="../css/boss.css"/>
</head>
<body>
<div class="main_box">
    <div class="echarts_box" id="echarts_box">
        <div id="main"></div>
    </div>
</div>
<!--javascript include-->
<script src="../js/jquery-2.2.1.min.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/jquery.validate.min.js"></script>
<script src="../js/bootstrap-datepicker.js"></script>
<script src="../js/boss.js"></script>
<script src="../js/other.js"></script>
<script>
    $(function(){
        var chartId = document.getElementById('main');
        var resizeWorldMapContainer = function () {
            chartId.style.width = document.getElementById('echarts_box').clientWidth - 40 +'px';
            chartId.style.height = document.getElementById('echarts_box').clientHeight - 40 +'px';
            chartId.style.padding = 20+'px';
        };
        var yjs1="";
        var ywash = "";
        var yjs2="";
        var line = "";
        $.ajax({
            url:'/findToday',
            success:function (data){
                var yj= data.objectMap.result;
                for (let i in yj) {
                    yjs1+=yj[i].ywash+','
                }
                for (let i in yj) {
                    yjs2+=yj[i].line+','
                }
                yjs1=yjs1.substring(0,yjs1.length-1)
                ywash=yjs1.split(",")
                yjs2=yjs2.substring(0,yjs2.length-1)
                line=yjs2.split(",")
                console.log(ywash)
                console.log(line)
                // 基于准备好的dom，初始化echarts实例
                resizeWorldMapContainer();
                var myChart = echarts.init(chartId);
                // 显示标题，图例和空的坐标轴
                myChart.setOption({
                    title:{
                        text:"日洗车量"
                    },
                    grid:{
                        top:70,
                        bottom:10
                    },
                    tooltip: {
                        trigger:"axis"
                    },
                    legend:{
                        data:["已洗车","洗车中"]
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    xAxis: {
                        name: "洗车量",
                        type: "category",
                        boundaryGap: false,
                        splitLine: {
                            show: true
                        },
                        data: []
                    },
                    yAxis: {
                        name: "时间"
                    },
                    series: [
                        {
                            name: "已洗车",
                            type: "line",
                            smooth: true, //是否平滑曲线展示
                            areaStyle: {
                                normal: {
                                    color: "rgba(165, 210, 240, 0.8)" //区域填充颜色
                                }
                            },
                            markPoint:{
                                data:[
                                    {type:"max",name:"最大值"},
                                    {type:"min",name:"最小值"}
                                ]
                            },
                            data: ywash
                        },
                        {
                            name: "洗车中",
                            type: "line",
                            smooth: true, //是否平滑曲线展示
                            areaStyle: {
                                normal: {
                                    color: "rgba(165, 210, 240, 0.8)" //区域填充颜色
                                }
                            },
                            markPoint:{
                                data:[
                                    {type:"max",name:"最大值"},
                                    {type:"min",name:"最小值"}
                                ]
                            },
                            data: line
                        }
                    ]
                });
                myChart.setOption(option);
            }
        })

    });
</script>
</body>
</html>